<!-- 自定义表格插件::支持分页 -->
<!--
    <myTable
        auto='getAll' (或者callback='getAll') 分页的当前页或者限制条变化时触发的回调 (备注: auto时 在初始化时立即自动调用 getAll异步请求接口 )
                                                    dad.getAll(0||null||false) => 返回初始化样式 this.currentPage = 1, this.limitTiao = 20
                                                    dad.getAll(call) => 在外部执行里面的自动刷新接口 并且显示加载遮罩层
                                                    call(start,end) => 异步接口getAll 开始前start, 结束后为end
                                                    当绑定为函数时 :auto='getAll'||:callback='getAll' => 默认传递参数为 (currentPage,limitTiao)
        pid=1 // 需要获取和操作 currentPage1(=当前是第几页) 和 limitTiao1(=当前限制多少条) 时加上
        multiple //支持多选表格行的数据 进行操作
        :myColumn='SelectColumnData' //表格头标签 进行解析表格数据的数组 {
                                            label:'标签',
                                            prop:'属性',
                                            show:'是否显示',
                                            width: '表格列的固定宽度',
                                            maxWidth: '表格列的最大宽度',
                                            fixed: '固定表格列',
                                            tooltip:'默认显示tooltip',
                                            img: true(默认宽度100px) || 200 || 'width:200px;border:1px solid red;' || (src,row,switch)=>{ return 'v-html'; },
                                            html: '<v-html></v-html>' || (src,row,switch)=>{ return 'v-html'; }
                                        }
        :height='Height-250' //表格的高度 如果未定义 则为自动高度
        btnCount=5 // 导航栏按钮最小数量为5
        hide='switch,checkbox,mySplitPage,tooltip,background' // 隐藏表格的相关组件 switch(=序号列) checkbox(=勾选复选框列) mySplitPage(=分页插件) tooltip(=溢出时全部都不隐藏,而是换行,加高) background(=导航按钮背景颜色)
        @select='checkbox勾选事件'
    ></myTable>
-->
<template>
    <div >
        <div style="position: relative;">
            <el-table
                :data="tableData"
                ref="myInnerTable"
                v-loading="loading"
                :element-loading-text="loading"
                element-loading-spinner=""
                element-loading-background="rgba(0, 0, 0, 0.2)"
                :height="height"
                tooltip-effect="dark"
                stripe
                border
                class='sortTable'
                :id=" multiple === undefined ? 'singleSelectTable' : '' "
                :highlight-current-row="true"
                @selection-change="selectOne"
                @row-click="selectOne"
                @select="selectThis"
                @header-click=' $emit("header-click",arguments[0],arguments[1]) '
                hook:mounted=''
                >
                <div v-if='show_index'>
                    <el-table-column v-if='!static' type="index" width="55" label='序号' fixed :index='setIndex' show-overflow-tooltip></el-table-column>
                    <el-table-column v-else type="index" width="55" label='序号' fixed show-overflow-tooltip></el-table-column>
                </div>


                <div v-if='show_checkbox'>
                    <el-table-column v-if='!selectable' type="selection" width="36" fixed ></el-table-column>
                    <el-table-column v-else type="selection" width="36" fixed :selectable='selectable'></el-table-column>
                </div>

                <el-table-column
                    v-for="(item,index) in myColumn"
                    v-if="item.show!==false"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width='item.width'
                    :min-width=' minWidth || item.minWidth '
                    :max-width='item.maxWidth'
                    :fixed=' !item.hasOwnProperty("fixed") ? false : item.fixed '
                    :align=' item.align || "center" '
                    :sortable='item.sort===true'
                    :show-overflow-tooltip=' show_tooltip===false ? false : item.tooltip!==false '
                    >
                    <template slot-scope="scope">
                        <div v-if='item.html'>
                            <div v-if=' typeof item.html === "function" ' v-html='item.html(scope.row[item.prop],scope.row,scope.$index)'></div>
                            <div v-else v-html='scope.row[item.prop]||item.html'></div>
                        </div>
                        <div v-else-if='item.img'>
                            <img v-if='typeof item.img!=="function" ' :src="scope.row[item.prop]" alt="" :style=' typeof item.img === "string" ? item.img : typeof item.img === "number" ?  "width:"+item.img+"px" : "width:100px;" '>
                            <div v-else v-html='item.img(scope.row[item.prop],scope.row,scope.$index)'></div>
                        </div>
                        <span v-else>{{ scope.row[item.prop]||'-' }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    v-if=' $slots.default || $scopedSlots.default '
                    :fixed="slotFixed"
                    align=center
                    :label=" slotLabel "
                    :width=" slotWidth ">
                    <template slot-scope="scope">
                        <slot :scope='scope'></slot>
                        <!-- <el-button @click.stop="prevLook(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">复制</el-button> -->
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页 -->
            <div v-if='show_background' v-show='show_mySplitPage' id="mySplitPage">
                <mySplitPage
                    :auto="auto"
                    :start='prevRefresh'
                    :end="refreshData"
                    :callback='callback'
                    :pid=' myPid '
                    :dad='myDad'
                    background
                    :btnCount='btnCount'
                    >
                </mySplitPage>
            </div>
            <div v-else v-show='show_mySplitPage' id="mySplitPage">
                <mySplitPage
                    :auto="auto"
                    :start='prevRefresh'
                    :end="refreshData"
                    :callback='callback'
                    :pid=' myPid '
                    :dad='myDad'
                    :btnCount='btnCount'
                    >
                </mySplitPage>
            </div>
        </div>
    </div>
</template>
<script>
    import mySplitPage from '@/myComponents/mySplitPage.vue';

    var isStatic, multiple, myDad, pid, currentPage, limitTiao, myInnerTable;
    export default {
        ref: false,
        global: false,
        name: 'myTable',
        components: { mySplitPage },
        props: [ 'multiple', 'myColumn', 'hide', 'height', 'pid', 'auto','callback','background','btnCount', 'minWidth', 'slots', 'selectable', 'dad','son','dadSon' ],
        data () {
            return {

                myThis: null,

                show_index: true,
                show_checkbox: true,
                show_mySplitPage: true,
                show_tooltip: true,
                show_background: true,

                myPid: '',
                myDad: null,

                static: null,
                loading: null,

                selectRow: null,
                tableData: [],

                staticSel: false,
                /*SelectColumnData2: [   //table列表
                    { label: "会员编码", show: false ,prop:"onlinestoreCode" },
                    { label: "会员名称", show: true ,prop:"storeName" },
                    { label: "身份状态", show: true, prop:"storeType", sort: true, html: function(value,row,scope){
                        return value === 1 ? '<i>代销</i>' : '商家';
                    } },
                    { label: "会员等级", show: true ,prop:"memberLevel", sort: true },
                    { label: "店铺图片", show: true ,prop:"onlinestoreUrl", img: function(src,row){
                        return '<i class=red>'+ src + '</i>';
                    } },
                    { label: "店铺介绍", show: true ,prop:"storeIntroduce" },
                    { label: "性别", show: false ,prop:"sex" },
                    // { label: "系统管理员", show: true ,prop:"isAdmin", sort: true },
                    { label: "联系电话", show: true ,prop:"contactPhone"},
                    // { label: "联系地址", show: true, prop:"address" },
                    { label: "身份证正面", show: false, prop:"documentFront",img: function(src,row){
                        return src;
                    } },
                    { label: "身份证反面", show: false, prop:"documentBack",img: function(src,row){
                        return src;
                    } },
                    { label: "微信号", show: false, prop:"wechatNumber"},
                    { label: "微信昵称", show: true, prop:"wechatNickname"},
                    // { label: "紧急联系电话", show: false, prop:"RetailPrice"},
                    // { label: "所属部门", show: true, prop:"deptName", sort: true },
                    { label: "所属职位", show: false, prop:"position" },

                    { label: "修改人", show: false, prop:"modifyUser" },
                    { label: "修改时间", show: false, prop:"modifyTime" },

                    { label: "创建人", show: false, prop: "createUser",  },
                    { label: "创建时间",show: true, prop: "createTime", sort: true   },
                    { label: "审核时间", show: true, prop:"disableTime" },
                    { label: "审核状态", show: true, prop:"disable", align:'center', sort: true },
                    // { label: "支付时间", show: true,prop: "checkTime",  },
                    // { label: "支付状态", show: true, prop:"checkStatus", align:'center', sort: true },

                ],*/
            }
        },
        methods: {
          mytable(list){
            list.map((v,i)=>{this.$refs.myInnerTable.toggleRowSelection(v,false);})
          },

            setIndex(index) {
                return ( ( currentPage || 1 ) - 1 ) * limitTiao + index + 1;
            },

            isSelectable(row,index) {
                // console.error(row,switch);
                return false;
            },

            clearSelection() {
                myInnerTable.clearSelection();
            },

            toggleSel(arr) {
              console.log('toggleSel')
                // this.tableData.forEach.sleep(this.tableData,0,r=>myInnerTable.toggleRowSelection(r,true));
                this.staticSel = true;
                // console.log('start',this.staticSel);
                arr.forEach(r=>myInnerTable.toggleRowSelection(r,true));
                setTimeout(()=>{
                    this.staticSel = false;
                    // console.log('end');
                },200);
            },

            selectThis(sel,row) {
              console.log('selectThis',sel,row)
                // console.error(sel,row);
                // row._selected = row._selected === true ? ( row._current = '', false ) : true;
                this.oneRow = row;
                this.selectRow = multiple ? sel : sel[0];
            },
            selectOne(rows,event,col) {

                // console.error(rows,event,col);
                if (event) {
                    // var myInnerTable = this.$refs.myInnerTable;
                    ( this.oneRow = rows )._selectable !== false && myInnerTable.toggleRowSelection(rows);
                    // myInnerTable.setCurrentRow();
                }else {
                    // console.error(111111,rows);
                    if( multiple ) {
                        this.selectRow = rows;
                        // console.log(33333333,this.staticSel);
                        this.loading === null && this.staticSel === false && this.$emit('select',rows,this,this.oneRow||false);
                    }else {
                        rows.length>1 && myInnerTable.toggleRowSelection(rows[0],false);
                        rows = this.selectRow = Last(rows);
                        this.loading === null && this.staticSel === false && this.$emit('select',rows,this,this.oneRow||false);
                        // this.tableData.includes(rows) && this.$emit('select',rows,this);
                    };

                };
            },

            prevRefresh(that,dadCall) {
                if( typeof dadCall === 'function' && dadCall(this) === false ) return;
                this.loading = '正在加载..';
                // console.warn(that,dadCall,this,this.loading);
            },
            refreshData(res,splitPage,dadCall,time) {
                // console.log(res);
                if (res.currentPage) {
                  splitPage.currentChange(res.currentPage)
                }
                if (res.limitTiao) {
                  splitPage.limitChange(res.limitTiao)
                }
                currentPage = splitPage.currentPage;
                limitTiao = splitPage.limitTiao;

                // this.tableData.forEach.sleep(this.tableData,0,r=>this.$refs.myInnerTable.toggleRowSelection(r,true));
                this.$emit('resEnd',this,this.tableData=res.items || []);
                if( typeof dadCall === 'function' && dadCall(this,true) === false ) return;
                setTimeout( ()=>this.loading = null, time||120 );
            },
        },
        watch: {
             selectRow(rows) {
                // console.error(rows);
                const tableData = this.tableData;
                if( !Array.isArray(rows) ) return;
                tableData.forEach(v=>{
                    const id = v.userId;
                    v._selected = !!rows.find(v=>{
                        return v.userId === id;
                    });
                });
                /*// console.log(this,rows);
                // this.$nextTick(()=>{
                    // rows = this.selectRow;
                    this.tableData.includes(rows) && this.$emit('select',rows,this);
                // });*/
            }
        },
        created() {
            isStatic = this.static = this.auto === undefined && this.callback === undefined;
            myDad = this.myDad = this.parseDadSon('myTable',p=>pid = this.myPid = p || this.pid ||  '');
            multiple = this.multiple!==undefined;

            const hide = this.hide;
            if( typeof hide === 'string' ) {
                hide.split(',').forEach(v=>this['show_'+v]=false);
            };

            this.myThis = this;
            var slots = this.slots;
            if( slots ) {
                slots = slots.split(',');
                this.slotLabel = slots[0]||'操作';
                this.slotWidth = slots[1]||80;
                this.slotFixed = slots[2]||false;
            };
            // console.error(this,this.auto);
        },

        mounted() {
            myInnerTable = this.$refs.myInnerTable;
        },
        destroyed() {

        }
    }
</script>
<style>

    .el-table {
        width: 100%;
        border: 1px solid #dfdfdf;
        border-bottom: none;
    }

    .el-table__fixed-right-patch{
        background: #e1e1e1 !important;
    }
    .el-table__body tr>td{
        background: #fafafa;
    }
    .el-table th {
        background:  #e1e1e1 !important;
        color: #444 !important;
    }
    .el-table th:hover {
        background:  #c1c1c1 !important;
    }
    .el-table .sort-caret.ascending {
        border-bottom-color: #909399;
    }
    .el-table .sort-caret.descending {
        border-top-color: #909399;
    }

    .el-table td, .el-table th.is-leaf {
        border-color: transparent;
    }
    .el-table--border td,
    .el-table--border th,
    .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
        border-right: 1px solid transparent!important;
        background: white;
    }

    .sortTable th {
        padding: 4px 0;
        /*padding: 6px 0;*/
    }

    .sortTable .el-table__body tr.current-row>td {
        background: #f9e3db !important;
        /*border-right: 1px solid #f9e3db;*/
        /*background: #f3e7ca !important;*/
    }
    .sortTable .el-table__body tr.current-row:hover >td {
        background: #f9e3db !important;
    }

    #singleSelectTable tr>th.el-table-column--selection>.cell {
        display: none;
    }
    #singleSelectTable .el-checkbox__inner {
        border-radius: 50%;
    }
    #mySplitPage {
        width: calc(100% - 0px);
        position: absolute;
        left: 0;
        bottom: -51px;
        z-index: 2000;
        background: white;
    }

</style>
